<template>
  <div class="cms-views-container">
    <CmsVideoHeader :title="'电视剧'" showSearch />
    <CmsFilterView
      :type="1"
      @click="handleClick('filterCriteria')"
      :class="{ 'component-selected': select === 'filterCriteria' }"
    />
    <CmsGridView
      :type="2"
      title="猜你喜欢"
      @click="handleClick('filterResultList')"
      :class="{ 'component-selected': select === 'filterResultList' }"
    />
  </div>
</template>

<script setup lang="ts">
import CmsComponents from '@cms/components'
import type { ComponentKeys } from '@cms/h5-editor'

const { CmsFilterView, CmsGridView, CmsVideoHeader } = CmsComponents
withDefaults(defineProps<{ type?: number; select?: ComponentKeys | undefined }>(), { type: 1 })

const emit = defineEmits<{
  (event: 'select', key: ComponentKeys): void
}>()

const handleClick = (key: ComponentKeys) => {
  emit('select', key)
}
</script>

<style scoped lang="less"></style>
